<template>
  <div id="fight-page" class="common-page">
    <el-card class="page-top">
      <el-button :type="dataTypeFlag == 1 ? 'primary' : '' " @click="changeDataType(1)">我情数据</el-button>
      <el-button :type="dataTypeFlag == 2 ? 'primary' : '' " @click="changeDataType(2)">敌情数据</el-button>
    </el-card>
    <div class="page-container">
      <el-card class="left-card tree-wrap">
        <div class="btn-box">
          <el-button :type="btnActive == 1 ? 'primary' : '' " size="small" @click="handleChangeTreeBtn(1)">部队编制</el-button>
          <el-button :type="btnActive == 2 ? 'primary' : '' " size="small" @click="handleChangeTreeBtn(2)">武器装备</el-button>
          <el-button :type="btnActive == 3 ? 'primary' : '' " size="small" @click="handleChangeTreeBtn(3)">作战目标</el-button>
        </div>
        <div class="tree-search">
          <el-input v-model="filterText" placeholder="请输入关键字" style="margin-right:20px;"/>
          <el-button size="small" color="#626aef" type="primary">查询</el-button>
        </div>
        <el-tree 
          ref="fightTreeRef" 
          :data="treeData" 
          :props="treeProps" 
          :filter-node-method="filterNode"
          @node-click="handleNodeClick" />
      </el-card>
      <el-card class="right-card">
        <div class="base-info-box">
          <el-row :gutter="20" class="row-margin">
            <el-col :span="8">
              <span class="label">部队名称：</span>
              <span class="value">XX战略支援保障部队</span>
            </el-col>
            <el-col :span="8">
              <span class="label">国家地区：</span>
              <span class="value">中国</span>
            </el-col>
            <el-col :span="8">
              <span class="label">部队类别：</span>
              <span class="value">战略支援保障</span>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="row-margin">
            <el-col :span="8">
              <span class="label">兵种：</span>
              <span class="value">歼击航空兵</span>
            </el-col>
            <el-col :span="8">
              <span class="label">驻地坐标：</span>
              <span class="value">120.94,39.23234</span>
            </el-col>
            <el-col :span="8">
              <span class="label">数据时间：</span>
              <span class="value">"2022-12-14 16:55:34"</span>
            </el-col>
          </el-row>
          <el-row class="row-margin">
            <el-col :span="24">
              <span class="label">具体地址：</span>
              <span class="value"></span>
            </el-col>
          </el-row>
          <el-row class="row-margin">
            <el-col :span="24">
              <span class="label">简述：</span>
              <span class="value"></span>
            </el-col>
          </el-row>
        </div>
        <div class="table-box">
          <el-card class="left-box">
            <div class="button-box">
              <el-button size="samll" type="primary">人员编制</el-button>
              <el-button size="samll" type="primary">新增</el-button>
              <el-button size="samll" type="primary">删除</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="Date" width="180" />
              <el-table-column prop="name" label="Name" width="180" />
              <el-table-column prop="address" label="Address" />
            </el-table>
            <div class="pagination-box">
              <el-pagination 
                v-model:current-page="pagination.currentPage1"
                layout="total,prev, pager, next" 
                :total="1000" />
            </div>
          </el-card>
          <el-card class="right-box">
            <div class="button-box">
              <el-button size="samll" type="primary">部署装备</el-button>
              <el-button size="samll" type="primary">新增</el-button>
              <el-button size="samll" type="primary">删除</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="Date" width="180" />
              <el-table-column prop="name" label="Name" width="180" />
              <el-table-column prop="address" label="Address" />
            </el-table>
            <div class="pagination-box">
              <el-pagination
                v-model:current-page="pagination.currentPage2" 
                layout="total,prev, pager, next" 
                :total="1000" />
            </div>
          </el-card>
        </div>
      </el-card>
    </div>
    
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs,onMounted,onUnmounted,watch } from 'vue';
import type { TabsPaneContext } from 'element-plus'

interface Tree {
  label: string
  children?: Tree[]
}
const dataTypeFlag = ref(1)
const changeDataType = (flag:number)=>{
  dataTypeFlag.value = flag
}
const btnActive = ref(1)
const handleChangeTreeBtn = (flag:number)=>{
  btnActive.value = flag
}
const tableData = reactive([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

const filterText = ref('')
const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const treeData: Tree[] = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]

const treeProps = {
  children: 'children',
  label: 'label',
}
const fightTreeRef = ref(null)
watch(filterText, (val) => {
  fightTreeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}
const pagination = reactive({
  currentPage1:1,
  currentPage2:1
})

</script>
<style lang="scss" scoped>
#fight-page{
  // display: flex;
  .page-top{
    text-align: right;
    margin-bottom: 10px;
  }
  .page-container{
    display: flex;
    height: calc(100% - 82px);
  }
  .tree-wrap{
    width: 300px;
    border-radius: 5px;
    height: 100%;
    margin-right:20px;
    .btn-box{
      margin-bottom: 20px;
    }
    .tree-search{
      display: flex;
      align-items: center;
    }
  }
  .right-card{
    flex: 1;
    .base-info-box{
      padding-bottom: 10px;
      border-bottom: 2px solid #c7c9cb;
      margin-bottom:20px;
      .row-margin{
        margin-bottom: 10px;
      }
    }
    .table-box{
      display: flex;
      .right-box,.left-box{
        flex: 1;
      }
      .left-box{
        margin-right:20px;
      }
      .button-box{
        margin-bottom: 10px;
      }
    }
  }
  .pagination-box{
    width: 100%;
    text-align: right;
  }
}

</style>

<style lang="scss">
.page-top{
  .el-card__body{
    // padding:10px 20px!important;
  }
}

</style>